<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" href="reset.css" />
    <style>
      .hot {
        width: 220px;
      }
      .hot h2 {
        font-size: 16px;
        line-height: 40px;
        padding-left: 34px;
      }
      .hot ul {
        border: 1px solid gray;
        font-size: 14px;
      }
      .hot li .book1 {
        line-height: 44px;
        border-bottom: 1px dashed gray;
        padding-left: 14px;
      }
      .hot li span {
        margin-right: 6px;
        font-weight: bold;
      }

      .hot .red {
        color: red;
      }

      .hot .book2 {
        display: none;
      }
      .hot .book2 {
        height: 102px;
        border-bottom: 1px dashed gray;
      }
      .hot .book2 div {
        margin-top: 6px;
      }
      .hot .book2 img {
        width: 76px;
      }

      .hot .book2 .nored {
        margin-left: 10px;
        display: inline-block;
        margin-top: 6px;
      }
      .hot .book2 .red {
        margin-left: 10px;
        display: inline-block;
        margin-top: 6px;
      }
      .hot .book2 .title {
        font-size: 14px;
        margin-bottom: 22px;
      }

      .hot .book2 .discount-price {
        font-size: 16px;
        font-weight: bold;
        color: red;
      }

      .hot .book2 .old-price {
        font-size: 14px;
        color: gray;
        text-decoration: line-through;
      }

      .hot li:hover .book1 {
        display: none;
      }
      .hot li:hover .book2 {
        display: flex;
      }
    </style>
  </head>
  <body>
    <div class="hot">
      <h2>近期热销榜</h2>
      <ul>
        <li>
          <div class="book1">
            <span class="red">1</span>如果蜗牛有爱情（上下
          </div>
          <div class="book2">
            <div><span class="red">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1">
            <span class="red">1</span>如果蜗牛有爱情（上下
          </div>
          <div class="book2">
            <div><span class="red">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1">
            <span class="red">1</span>如果蜗牛有爱情（上下
          </div>
          <div class="book2">
            <div><span class="red">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span class="nored">4</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span class="nored">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span class="nored">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span class="nored">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span class="nored">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span class="nored">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
        <li>
          <div class="book1"><span>4</span>如果蜗牛有爱情（上下</div>
          <div class="book2">
            <div><span class="nored">1</span></div>
            <div><img src="img/萤火虫小巷.jpg" /></div>
            <div>
              <p class="title">萤火虫小巷</p>
              <p class="discount-price">￥14.40</p>
              <p class="old-price">￥36.00</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>
